<template>
  <div class="ChildPage TablePage" v-loading="loading">
    <vb-page ref="page">
      <template #headerSearch-prepend="scope">
        <el-button size="small" v-loading="bomLoading" @click="reloadBom? getBomReloadResult(true): doBomSync()" :icon="reloadBom? 'el-icon-loading': 'el-icon-refresh'">{{ reloadBom? '同步中，点击刷新': '同步BOM' }}</el-button>
        <div style="flex-grow: 1; width: 100%;"></div>
      </template>
      <template #table-child="scope">
        <el-button type="text" size="mini" @click="openShow(scope.row.childList)"><span style="font-size: 14px">查看详细</span></el-button>
      </template>

    </vb-page>

    <el-dialog title="子项详细" v-model="show" center width="1000px" top="70px" :append-to-body="true" :close-on-press-escape="true" :close-on-click-modal="false">
      <el-table :data="childList" height="calc(100vh - 370px)">
        <el-table-column label="子项物料名称" prop="childMaterialName"></el-table-column>
        <el-table-column label="子项物料编码" prop="childMaterialNo"></el-table-column>
        <el-table-column label="子项规格型号" prop="childMaterialModel"></el-table-column>
        <el-table-column label="子项单位" prop="childUnitName"></el-table-column>
        <el-table-column label="子项物料属性" prop="childMaterialProperty"></el-table-column>
        <el-table-column label="子项类型" prop="childMaterialType"></el-table-column>
        <el-table-column label="用量:分子" prop="numerator"></el-table-column>
        <el-table-column label="用量:分母" prop="denominator"></el-table-column>
        <el-table-column label="变动损耗率" prop="scraprate"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bomLoading: false,
      reloadBom: false,
      show: false,
      childList: []
    }
  },
  methods: {
    openShow(childList) {
      this.show = true
      this.childList = childList
      console.log(this.childList)
    },
    /**
     * 获取加载按钮的加载中状态
     */
    async getBomReloadResult(showMsg) {
      this.bomLoading = true
      try {
        let res = await this.callApi("get_bom_reload_result")
        if (!res.res) return
        this.reloadBom = res.reloadBom
        this.reloadBomRes = res.reloadBomRes
        this.reloadBomMsg = res.reloadBomMsg
        this.reloadBomStartTime = res.reloadBomStartTime
        this.reloadBomEndTime = res.reloadBomEndTime
        if (showMsg) {
          if (this.reloadBom) {
            this.$message.info('BOM数据同步中')
          } else {
            if (this.reloadBomRes) {
              this.reload()
              this.$message.success('已同步完成, 请刷新查看最新结果')
            } else {
              this.$message.error('同步失败，' + this.reloadBomMsg)
            }
          }
        }
      } finally {
        this.bomLoading = false
      }
    },
    /**
     * 同步BOM
     * */
    async doBomSync() {
      try {
        let msg = '';
        if (this.reloadBomStartTime) {
          msg += `<span style="font-weight: bold;">同步BOM，耗时较长，是否继续执行？</span><br />
          前次同步${ this.reloadBomRes? '成功!': `<span style="color: var(--danger)">失败!</span>` } ${ this.reloadBomEndTime }
          ${ this.reloadBomRes? '': `<br />${ this.reloadBomMsg }` }
          <br />`;
        } else {
          msg = '同步BOM，耗时较长，是否继续执行？';
        }
        await this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true
        })
      } catch(e) {
        return
      }
      try {
        this.loading = true
        let res = await this.callApi("sync_bom")
        if (!res.res) return
        this.reloadBom = true
        this.$message.success('已经开始同步')
      } finally {
        this.loading = false
      }
    },
  }
}
</script>

<style scoped>

</style>
